<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/index-management.css">
</head>
<body class="index-management">
<div class="index-management-body">
    <!--start header-->
    <div class="header layui-row">
        <div class="layui-col-md2">欢迎您：<span class="user-name">张芝-luck</span></div>
        <div class="layui-col-md2">当前状态：<span class="status">在线</span></div>
        <div class="layui-col-md2">等级：<span class="level">13级</span></div>
    </div>
    <!--end header-->

    <!--start personal-data-->
    <div class="personal-data">
        <div class="personal-data-body">
            <h1>个人资料</h1>
            <table class="layui-table">
                <colgroup>
                    <col width="180">
                    <col width="610">
                    <col width="180">
                </colgroup>
                <tbody>
                <tr>
                    <td>登录</td>
                    <td>自2018年4月10日至今共3600小时</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>地址</td>
                    <td class="ttd0">江苏省苏州市姑苏区星巴克咖啡店</td>
                    <td class="table-img" rowspan="2"></td>
                </tr>
                <tr>
                    <td>等级</td>
                    <td class="ttd0">271876积分（距离下一级之差8124积分）</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--end personal-data-->

    <!--start recent-dynamic-->
    <div class="recent-dynamic">
        <div class="personal-data-body">
            <h1>最近动态</h1>
            <table class="layui-table">
                <colgroup>
                    <col width="190">
                    <col width="135">
                    <col width="260">
                    <col width="195">
                    <col width="175">
                </colgroup>
                <tbody>
                <tr>
                    <td>类型</td>
                    <td>积分周期</td>
                    <td>周期内积分次数上限（次）</td>
                    <td>积分分值（分）</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>主动分享文章</td>
                    <td class="ttd">每天</td>
                    <td class="ttd">3</td>
                    <td class="ttd">3</td>
                    <td rowspan="2" class="table-img"></td>
                </tr>
                <tr>
                    <td>被分享文章</td>
                    <td class="ttd">每天</td>
                    <td class="ttd">0</td>
                    <td class="ttd">0</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--end recent-dynamic-->
</div>
<script src="layui/layui.js"></script>
<script src="layui/lay/modules/jquery.js"></script>
<script>
    layui.use(['layer', 'form', 'element'], function () {
        var $ = layui.$;

        $(".table-img").eq(0).click(function () {
            $(".ttd0").each(function () {
                obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框
                if (!obj_text.length) {   // 如果没有文本框，则添加文本框使之可以编辑
                    var inp = $(this).html("<input type='text' value='" + $(this).text() + "'>");
                    // console.log(inp)//td
                }
                else {  // 如果已经存在文本框，则将其显示为文本框修改的值
                    var inp1 = $(this).html(obj_text.val());
                    // console.log(inp1)
                }

                function tdInput() {
                    var k = 0;
                    for (k; k < 2; k++) {
                        $('.ttd0').eq(k).html($('.ttd0').eq(k).children().val());
                    }
                    // $('.ttd').eq(0).html($('.ttd').eq(0).children().val());
                    // $('.ttd').eq(1).html($('.ttd').eq(1).children().val());
                    // $('.ttd').eq(2).html($('.ttd').eq(2).children().val());
                    // $('.ttd').eq(3).html($('.ttd').eq(3).children().val());
                }

                /*$('input').blur(function () {
                    tdInput()
                })*/

                $('input').keydown(function (event) {
                    var keycode = event.which;
                    if (keycode == 13) {
                        tdInput()
                    }
                });
            });
        });


        $(".table-img").eq(1).click(function () {
            $(".ttd").each(function () {
                obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框
                if (!obj_text.length) {   // 如果没有文本框，则添加文本框使之可以编辑
                    var inp = $(this).html("<input type='text' value='" + $(this).text() + "'>");
                    // console.log(inp)//td
                }
                else {  // 如果已经存在文本框，则将其显示为文本框修改的值
                    var inp1 = $(this).html(obj_text.val());
                    // console.log(inp1)
                }

                function tdInput() {
                    var k = 0;
                    for (k; k < 6; k++) {
                        $('.ttd').eq(k).html($('.ttd').eq(k).children().val());
                    }
                    // $('.ttd').eq(0).html($('.ttd').eq(0).children().val());
                    // $('.ttd').eq(1).html($('.ttd').eq(1).children().val());
                    // $('.ttd').eq(2).html($('.ttd').eq(2).children().val());
                    // $('.ttd').eq(3).html($('.ttd').eq(3).children().val());
                }

                /*$('input').blur(function () {
                    tdInput()
                })*/

                $('input').keydown(function (event) {
                    var keycode = event.which;
                    if (keycode == 13) {
                        tdInput()
                    }
                });
            });
        });
    });
    // console.log($('.ttd'));
</script>
</body>
</html>